import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import type { CSSProperties, ReactNode } from 'react';
import type { Argument } from 'classnames';
import './index.less';

const isValidWidth = (width: string | number): boolean => {
  // console.warn('传入宽度值不合法')
  return /^(\d+(\.\d+)?(px|%)?)$/.test(width.toString());
};

const defaultProps = {
  leftWidth: '50%',
};

const TjCollapse: React.FC<ITjCollapseProps> = (props) => {
  const [leftWidth, setLeftWidth] = useState<string | number>(defaultProps.leftWidth);
  const [rightWidth, setRightWidth] = useState<string | number>(defaultProps.leftWidth);
  const [isLeftCollapsed, setIsLeftCollapsed] = useState<boolean>(false);
  const [isRightCollapsed, setIsRightCollapsed] = useState<boolean>(false);

  const toggleCollapse = (side: 'left' | 'right') => {
    if (side === 'left') {
      setIsRightCollapsed(!isRightCollapsed);
      if (!isRightCollapsed) {
        setRightWidth('0');
        setLeftWidth('100%');
      } else {
        setRightWidth(`calc(100% - ${props.leftWidth || defaultProps.leftWidth})`);
        setLeftWidth(props.leftWidth || defaultProps.leftWidth);
      }
    } else if (side === 'right') {
      setIsLeftCollapsed(!isLeftCollapsed);
      if (!isLeftCollapsed) {
        setLeftWidth('0');
        setRightWidth('100%');
      } else {
        setLeftWidth(props.leftWidth || defaultProps.leftWidth);
        setRightWidth(`calc(100% - ${props.leftWidth || defaultProps.leftWidth})`);
      }
    }
  };

  useEffect(() => {
    if (props.leftWidth && isValidWidth(props.leftWidth)) {
      setLeftWidth(props.leftWidth);
      setRightWidth(`calc(100% - ${props.leftWidth})`);
    } else {
      setLeftWidth(defaultProps.leftWidth);
      setRightWidth(`calc(100% - ${defaultProps.leftWidth})`);
    }
  }, [props.leftWidth]);

  return (
    <div className={classNames('tj-collapse', props.className)} style={props.style}>
      <div
        className={classNames('left', {
          'tj-collapsed': isLeftCollapsed,
          'h-left-m': isRightCollapsed || isLeftCollapsed,
        })}
        style={{ width: leftWidth }}
      >
        <div className="btn" onClick={() => toggleCollapse('left')}>
          <span className={classNames('icon', { 'icon-rotate': isRightCollapsed })}>
            <CaretRightOutlined />
          </span>
        </div>
        {props.leftContent}
      </div>
      <div
        className={classNames('right', { 'tj-collapsed': isRightCollapsed })}
        style={{ width: rightWidth }}
      >
        <div className="btn" onClick={() => toggleCollapse('right')}>
          <span className={classNames('icon', { 'icon-rotate': isLeftCollapsed })}>
            <CaretLeftOutlined />
          </span>
        </div>
        {props.rightContent}
      </div>
    </div>
  );
};

interface ITjCollapseProps {
  /**
   * 支持传入行内样式
   */
  style?: CSSProperties;
  /**
   * class
   * 不管传没传，都会有一个 `tj-collapse` 的 className
   */
  className?: Argument;
  /**
   * 左边内容元素
   */
  leftContent: ReactNode;
  /**
   * 右边内容元素
   */
  rightContent: ReactNode;
  /**
   * 左边宽度,只用传一个左边宽度自动计算出右边模块宽度
   */
  leftWidth?: string | number;
  // /**
  //  * 右边宽度
  //  */
  // rightWidth?: string | number;
}

export { TjCollapse };
